<template>
  <DataTablePicker
    v-if="visible"
    :visible="visible"
    :api="api"
    multiple
    title="选择借阅书籍"
    v-bind="$attrs"
    @update:visible="val => $emit('update:visible', val)"
    v-on="$listeners">
    <TableColumn label="图书编号" prop="bookNumber" />
    <TableColumn label="图书编码" prop="bookCode" />
    <TableColumn label="图书名称" prop="name" />
    <TableColumn label="作者" prop="author" />
    <TableColumn label="出版日期" prop="publishDate" />
    <TableColumn label="编录号" prop="catalogCode" />
    <TableColumn label="状态" prop="status" :options="bookStatus" />
    <template #search-form="{ search }">
      <FormHolder :model="model">
        <FormInput v-model="model.name" label="图书名称" />
        <ElButton
          size="mini"
          style="margin-left: 20px; padding-right: 20px; padding-left: 20px"
          type="primary"
          @click="search"
          >搜索</ElButton
        >
      </FormHolder>
    </template>
  </DataTablePicker>
</template>

<script>
  import { bookStatus } from '@/module/library/book/dictionary'
  import { getPage } from '@/module/library/book/api'

  export default {
    name: 'BookPicker',
    props: {
      visible: Boolean
    },
    data() {
      return {
        bookStatus,
        model: {
          name: ''
        }
      }
    },
    methods: {
      async api(page) {
        const res = await getPage({ ...page, example: this.model })
        res.data.data.records = res.data.data.records.map(value => ({ ...value, disabled: value.status === 1 }))
        return res
      }
    }
  }
</script>
